<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
* {margin:0; padding:0; list-style:none;}

#div1 {width:850px; height:500px; margin:50px auto; overflow:hidden; position:relative;}
#div1 ul {position:absolute;left: 0;top: 0;}
#div1 ul li{height:500px;float: left;}
#div1 ol {position:absolute;right: 10%;bottom: 10px;z-index:6}
#div1 ol li{width: 20px;height: 20px;background: #fff;margin-left: 5px;float: left;line-height: 20px;text-align: center;}
#div1 ol li.ac{background: red;color: #fff;}
#div1>a{text-decoration: none;position: absolute;top: 50%;margin-top: -10px;height: 40px;line-height: 32px;text-align: center;width: 40px;font-size: 40px;vertical-align: middle;color: #fff;background: rgba(0,0,0,0.5);z-index:6;}
#goPrev{left: 0;}
#goNext{right: 0;}
img{width:850px; height:500px;}
</style>
<script src="utils.js"></script>
<script>
    window.onload = function () {
      var box = document.querySelector('#div1')
      var ol = document.querySelector('#div1 ol')
      var ul = document.querySelector('#div1 ul')
      var imgs = document.querySelectorAll('#div1 ul li')
      var goPrev = document.querySelector('#goPrev')
      var goNext = document.querySelector('#goNext')
      var width = imgs[0].offsetWidth
      var len = imgs.length
      var lastIndex = 0
      var Index = 0
      var btns = []
      for (var i = 0; i < len; i++) {
        var li = document.createElement('li')
          li.innerHTML = i + 1
          li.className = i === 0 ? 'ac' : ''
          ol.appendChild(li)
          btns.push(li)
      }
      ul.appendChild(imgs[0].cloneNode(true))
      ul.style.width = (len + 1) * width + 'px'
      var isMove = false
      btns.forEach( (btn, i) => {
        btn.onclick = function (){
          if(!isMove) {
            isMove = true
            lastIndex = Index
            Index = i
            utils.move1(ul, 'left', -Index * width, ()=> {
              isMove = false
            })
          }
          btns[lastIndex].classList.remove('ac')
          btns[Index].classList.add('ac')
        }
      })
      goPrev.onclick = function () {
        if(!isMove) { 
          isMove = true
          lastIndex = Index
          Index--
          if(Index < 0) {
            Index = len - 1
           ul.style.left = - len * width + 'px'
          }
          utils.move1(ul, 'left', -Index * width, () => {
            isMove = false
          })
        }
        btns[lastIndex].classList.remove('ac')
        btns[Index].classList.add('ac')
      }
      goNext.onclick = function () {
        if(!isMove) {
          isMove = true
          lastIndex = Index
          Index++
          if(Index === len) {
            Index = 0
            utils.move1(ul, 'left', -len * width, () => {
              ul.style.left = '0px'
              isMove = false
            })
          }else {
            utils.move1(ul, 'left', -Index * width, () => {
              isMove = false
            })
          }
        }
        btns[lastIndex].classList.remove('ac')
        btns[Index].classList.add('ac')
      }
      // box.onmouseleave = function () {
      //   box.timer = setInterval( () => {
      //       goNext.onclick()
      //   },1500)
      // }
    //   box.onmouseleave = function () {
    //   box.timer = setInterval(() => {
    //     goNext.onclick()
    //   },300)
    // }
    //   box.onmouseenter = function () {
    //     clearInterval(box.timer)
    //   }
    // }
    // box.onmouseleave = function () {
    //   box.timer = setInterval(() => {
    //     goNext.onclick()
    //   },200)
    // }
    box.onmouseleave = (function auto () {
    box.timer = setInterval(goNext.onclick, 3000)
    return auto
  })()
    box.onmouseenter = function () {
      clearInterval(box.timer)
    }
  }
</script>
</head>

<body>
<div id="div1">
	<ul>
    <li><img src="images/1.jpg" /></li>
    <li><img src="images/2.jpg" /></li>
    <li><img src="images/3.jpg" /></li>
    <li><img src="images/4.jpg" /></li>
    <li><img src="images/5.jpg" /></li>
  </ul>
  <ol>

  </ol>
  <a href="javascript:;" id="goPrev">&laquo;</a>
  <a href="javascript:;" id="goNext">&raquo;</a>
</div>
</body>
</html>
